<template>
    <view class="footer-view" :style="{ height: listHeight + 'rpx' }">
        <eui-card title="基本信息" showTitleLine="true" h-padding="20" type="upDownSingle">
            <template v-slot:content>
                <view class="m-main-top">
                    <!-- <eui-text v-model="mainData.c_no" title="供应商" type="titlename" :name="mainData.c_name"
                        occupy /> -->
                    <eui-text :value="mainData.c_pro_plan_id" :name="mapProDef[mainData.c_pro_plan_id] || ''"
                        title="促销活动" type="titlename" occupy />
                    <eui-text :value="getProTypeName(mainData.c_pro_type)" title="促销类型" type="name" />
                    <eui-text :value="mainData.c_prior" type="name" title="优先级" />
                    <!-- <eui-text :value="getDictName('促销性质', mainData.c_pro_kind)" title="促销性质" type="name" />
                    <eui-text :value="getDictName('促销档期', mainData.c_pro_period)" title="促销档期" type="name" /> -->
                    <!-- <eui-text :value="getDictName('机构方式', mainData.c_purchase_type)" title="机构方式"
                        type="name" /> -->
                    <eui-text :value="codeWithName(mainData.c_store_id)" type="name" title="机构" occupy />
                    <eui-text :value="mainData.c_sale_sda" type="date" title="销售日期" />
                    <eui-text :value="mainData.c_sale_eda" type="date" title="" />
                    <eui-text :value="mainData.c_adno" title="部门" :name="getRelatedName('rdsDeparts', mainData.c_adno)"
                        type="titlename" />
                    <!-- <eui-text :value="mainData.c_name" type="name" title="组合名称" /> -->
                    <!-- <eui-text :value="getDictName('损失承担处理方式', mainData.c_fall_take_type)" title="损失承担方式"
                        type="name" /> -->
                    <eui-text :value="getDictName('顾客类型', mainData.c_mem_type)" title="顾客类型" type="name" />
                    <eui-text :value="getDictName('促销发起方', mainData.c_owner)" title="发起方" type="name" />
                    <!-- <eui-text :value="mainData.c_provider" title="供应商" type="titlename" name="rdsProviders" /> -->
                    <eui-text :value="mainData.c_apply_userno"
                        :name="getRelatedName('rdsUsers', mainData.c_apply_userno)" type="titlename" title="申请人" />
                    <!-- <eui-text :value="mainData.c_en_dt" type="name" title="促销描述" /> -->
                    <eui-text :value="mainData.c_mk_userno" title="录入" :name="getRelatedName('rdsUsers', mainData.c_mk_userno)"
                        type="titlename" />
                    <eui-text :value="mainData.c_mk_dt" type="rdstime" />
                </view>
            </template>

        </eui-card>
        <eui-card title="活动条件" showTitleLine="true" h-padding="20" type="upDownSingle">
            <template v-slot:content>
                <view class="m-main-top">
                    <eui-text :value="mainData.c_max_level" :type="mainData.c_max_level > 1 ? 'link' : 'name'"
                        @click="clickLevel" title="满减级次" />
                    <eui-text :value="getDictName('多级次满减计算方式', mainData.c_loop_mode)" title="满减方式" type="name"
                        v-if="mainData.c_max_level > 1" />
                    <eui-text :value="getDictName('条件限制类型', mainData.c_lmt_type)" title="限制类型" type="name" />
                    <eui-text :value="mainData.c_min_amt" type="price" title="金额下限(≥)"
                        v-if="['1', '3', '4'].includes(mainData.c_lmt_type) && mainData.c_max_level === 1" />
                    <eui-text :value="mainData.c_max_amt" type="price" title="金额上限(≤)"
                        v-if="['1', '4'].includes(mainData.c_lmt_type) && mainData.c_max_level === 1" />
                    <eui-text :value="mainData.c_min_n" type="price" title="数量下限(≥)"
                        v-if="['2', '4'].includes(mainData.c_lmt_type) && mainData.c_max_level === 1" />
                    <eui-text :value="mainData.c_max_n" type="price" title="数量上限(≤)"
                        v-if="['2', '4'].includes(mainData.c_lmt_type) && mainData.c_max_level === 1" />
                    <eui-text :value="getDictName('满减促销退损类型', mainData.c_reduct_type)" title="退损类型" type="name"
                        occupy />
                    <eui-text :value="mainData.c_off_amt" type="price" title="满减金额" />
                    <eui-text :value="mainData.c_to_amt" type="price" title="满减至金额" />
                    <eui-text :value="mainData.c_price_rate" type="price" title="满减折扣率(%)" />
                    <eui-text :value="mainData.c_max_count" type="price" title="最多份数"
                        v-if="!['0'].includes(mainData.c_reduct_type)" />
                    <eui-text :value="getDictName('分组运算方式', mainData.c_group_xor)" title="条件关系" type="name" occupy />
                    <eui-text :value="getDictName('是非', mainData.c_is_add)" title="是否叠加执行" type="name" />
                    <eui-text :value="getDictName('是非', mainData.c_mute_flag)" title="排他" type="name" />
                    <eui-text :value="getDictName('是非', mainData.c_is_dt)" title="时间段控制"
                        :type="mainData.c_is_dt === '1' ? 'link' : 'name'" @click="clickIsDt" />
                    <eui-text :value="getDictName('是非', mainData.c_is_pay)" title="支付方式限制"
                        :type="mainData.c_is_pay === '1' ? 'link' : 'name'" @click="clickIsPay" />
                    <eui-text :value="getDictName('是非', mainData.c_is_lmt)" title="是否限量"
                        :type="mainData.c_is_lmt === '1' ? 'link' : 'name'" @click="clickIsLmt" />
                </view>
            </template>
        </eui-card>
        <view class="paging-view">
            <eui-paging ref="paging" v-model="listManager" :fixed="false" :refresher-enabled="false"
                :default-page-size="20" :loading-more-enabled="true" :show-loading-more-when-reload="true">
                <view v-for="(item, index) in listManager" class="m-list-top">
                    <eui-text :value="item.c_group" type="name" :title="index + 1 + '. ' + '分组号'" />
                    <eui-text :value="getDictName('满减促销商品范围限制规则', item.c_lmt_rule)" title="范围限制" type="name" />
                    <eui-text :value="item.c_adno" type="titlename" title="部门"
                        :name="getRelatedName('rdsDeparts', item.c_adno)" />
                    <eui-text :value="getRelatedName('rdsGdsclasses', item.c_ccode)" type="name" title="品类" />
                    <eui-text :value="getRelatedName('rdsBrands', item.c_bcode)" type="name" title="品牌" />
                    <eui-text :value="getDictName('价格类型', item.c_code_by)" title="价格类型" type="name" />
                    <eui-text v-model="item.c_provider" title="供应商" type="titlename"
                        :name="getRelatedName('rdsProviders', item.c_provider)" occupy />
                    <eui-text v-model="item.c_gcode" title="商品" type="titlename" :name="item.c_gname" occupy />
                    <eui-text :value="item.c_barcode" type="name" title="条码" />
                    <eui-text :value="item.c_price" type="price" title="零售价" />
                    <eui-text :value="getDictName('经营方式', item.c_con_type)" title="经营方式" type="name" />
                    <eui-text :value="getDictName('损失承担方法', item.c_take_method)" title="损失承担" type="name" />
                    <eui-text :value="getDictName('损失计算方法', item.c_rate_type)" title="损失计算" type="name" />
                    <eui-text :value="item.c_take_rate" type="price" title="承担比例/金额/金额差" occupy />
                </view>
            </eui-paging>
        </view>
    </view>
    <eui-popup ref="lvPopup" background-color="#f8f8f8" type="bottom" :mask-click="true">
        <view class="popup-content">
            <view class="popup-title">级次详情</view>
            <scroll-view scroll-y="true"
                style="width: 100%;min-height: 10px;max-height:400px;box-sizing: border-box;overflow-y: scroll;">
                <view v-for="(item, index) in lvData" :key="index">
                    <view class="m-list-top">
                        <eui-text :value="item.c_level" type="name" title="级次" />
                        <eui-text :value="item.c_min_amt" type="price" title="金额下限(≥)"
                            v-if="['1', '3', '4'].includes(mainData.c_lmt_type)" />
                        <eui-text :value="item.c_max_amt" type="price" title="金额上限(≤)"
                            v-if="['1', '3', '4'].includes(mainData.c_lmt_type) || ['6'].includes(mainData.c_reduct_type)" />
                        <eui-text :value="item.c_min_n" type="price" title="数量下限(≥)"
                            v-if="['2', '4'].includes(mainData.c_lmt_type)" />
                        <eui-text :value="item.c_max_n" type="price" title="数量上限(≤)"
                            v-if="['2', '4'].includes(mainData.c_lmt_type)" />
                        <eui-text :value="item.c_off_amt" type="price" title="满减金额"
                            v-if="['1', '6'].includes(mainData.c_reduct_type)" />
                        <eui-text :value="item.c_price_rate" type="number" title="满减后折扣率(%)"
                            v-if="['3', '0'].includes(mainData.c_reduct_type)" />
                    </view>
                </view>
            </scroll-view>
        </view>
    </eui-popup>
    <eui-popup ref="dtPopup" background-color="#f8f8f8" type="bottom" :mask-click="true">
        <view class="popup-content">
            <view class="popup-title">时段限制</view>
            <scroll-view scroll-y="true"
                style="width: 100%;min-height: 10px;max-height:400px;box-sizing: border-box;overflow-y: scroll;">
                <view v-for="(item, index) in dtData" :key="index">
                    <view class="m-list-top">
                        <eui-text :value="item.c_day" type="name" :title="index + 1 + '. ' + '日'" occupy />
                        <eui-text :value="getDictName('星期', item.c_week_day.split('').join(','))" type="name" title="星期"
                            occupy />
                        <eui-text :value="item.c_stime" type="name" title="开始时间" />
                        <eui-text :value="item.c_etime" type="name" title="结束时间" />
                        <!-- <eui-text :value="item.c_price_rate" type="number" title="折扣率(%)" /> -->
                        <eui-text :value="item.c_note" type="name" title="备注" />
                    </view>
                </view>
            </scroll-view>
            <!-- <view class="bottom">
                <eui-button type="close" @confirm="confirm" title="关闭" />
            </view> -->
        </view>
    </eui-popup>
    <eui-popup ref="payPopup" background-color="#f8f8f8" type="bottom" :mask-click="true">
        <view class="popup-content">
            <view class="popup-title">支付限制</view>
            <scroll-view scroll-y="true"
                style="width: 100%;min-height: 10px;max-height:400px;box-sizing: border-box;overflow-y: scroll;">
                <view v-for="(item, index) in payData" :key="index">
                    <view class="m-list-top">
                        <eui-text :value="item.c_pay_class" :name="getClassName(item.c_pay_class)" type="titlename"
                            :title="index + 1 + '. ' + '支付分类'" />
                        <eui-text :value="getCodeName(item.c_pay_code)" type="name" title="支付方式" />
                        <eui-text :value="item.c_note" type="name" title="备注" />
                    </view>
                </view>
            </scroll-view>
            <!-- <view class="bottom">
                <eui-button type="close" @confirm="confirm" title="关闭" />
            </view> -->
        </view>
    </eui-popup>
    <eui-popup ref="lmtPopup" background-color="#f8f8f8" type="bottom" :mask-click="true">
        <view class="popup-content">
            <view class="popup-title">限量规则</view>
            <scroll-view scroll-y="true"
                style="width: 100%;min-height: 10px;max-height:400px;box-sizing: border-box;overflow-y: scroll;">
                <view v-for="(item, index) in lmtData" :key="index">
                    <view class="m-list-top">
                        <eui-text :value="getDictName('客户限量维度', item.c_lmt_p_dim)" type="name"
                            :title="index + 1 + '. ' + '客户'" />
                        <eui-text :value="getDictName('机构限量维度', item.c_lmt_s_dim)" type="name" title="机构" />
                        <eui-text :value="getDictName('时间限量维度', item.c_lmt_d_dim)" type="name" title="时间" />
                        <eui-text :value="item.c_n_lmt" type="number3" title="限量" />
                        <eui-text :value="item.c_note" type="name" title="备注" style="white-space: pre-wrap;" occupy />
                    </view>
                </view>
            </scroll-view>
            <!-- <view class="bottom">
                <eui-button type="close" @confirm="confirm" title="关闭" />
            </view> -->
        </view>
    </eui-popup>

</template>

<script setup type="ts">
import service from '@/common/service';
import { useProRelatedNameHook } from '@/hooks/useProRelatedName';

import { useProTypeHook } from '@/hooks/useProType';
import { usePayCodeHook } from '@/hooks/usePayCode';
import { getRelatedName, getStoreRelatedName } from '../RdsViews/components/RelatedName';
import { getRdsUrl, rdsRequest, rdsRequestAsync } from '@/hooks/rdsServices';
import { onMounted, ref } from "vue";

const { getProTypeName } = useProTypeHook();
const { payCodeItems, payClassItems } = usePayCodeHook();
const { mapProDef } = useProRelatedNameHook();
const rdsUrl = getRdsUrl();
const listHeight = ref(300);
const mainData = ref({});
const detailData = ref([]);
const listManager = ref([]);
const lvData = ref([]);
const dtData = ref([]);
const payData = ref([]);
const lmtData = ref([]);
const rdsDict = ref([]);

const paging = ref(null);

const lvPopup = ref(null);
const dtPopup = ref(null);
const payPopup = ref(null);
const lmtPopup = ref(null);

const props = defineProps({
    data: {
        type: Object
    },
    windowWidth: {
        type: Number,
        default: 0,
    }
});
onMounted(async () => {
    await getListHeight();
    service.enjoyShowLoading('正在加载...');
    await getAllDicData();
    if (props.data.BillId) {
        await billQuery(props.data.BillId);
    }
    service.enjoyHideLoading();
})

// 获取列表高度
const getListHeight = async () => {
    uni.getSystemInfo({
        success: function (res) { // res - 各种参数
            let info = uni.createSelectorQuery().select(".footer-view");
            info.boundingClientRect(function (data) { //data - 各种参数
                //获取列表高度
                let height = res.windowHeight - (data?.top  || 0);
                //转换rpx
                listHeight.value = height / (res.windowWidth / 750) - 100;
            }).exec()
        }
    });
};
// 获取字典数据
const getAllDicData = async () => {
    rdsDict.value = await service.getLocalStorage('rdsDict');
};

const getDictName = (key, value) => {
    let list = [];
    value?.split(',').map(item => {
        const dictMap = rdsDict.value.find(x => x.c_class_name === key && x.c_id === item);
        if (dictMap) {
            list.push(dictMap.c_name || '');
        } else {
            list.push(item);
        }
    })
    return list.join(',');
};
// 获取预约单据详情信息
const billQuery = async (billId) => {
    if (!billId) {
        paging.value.setLocalPaging([]);
        return;
    }
    const result = await rdsRequest(rdsUrl.bcApi, '满减促销单', 'EnjoyBillQuery', { BillId: billId }, '261');
    if (result.ds.length > 0) {
        mainData.value = result.ds[0];
        detailData.value = result.ds1;
        lvData.value = result.ds2;
        dtData.value = result.ds4;
        payData.value = result.ds5;
        lmtData.value = result.ds6;
        await replaceNote(lmtData.value);
        paging.value.setLocalPaging(result.ds1);
    } else {
        paging.value.setLocalPaging([]);
    }
}
const codeWithName = (localValue) => {
    let list = [];
    localValue.split(',').map(item => {
        const name = getStoreRelatedName(item);
        if (name) {
            list.push("[" + item + "]" + name);
        } else {
            list.push("[" + item + "]");
        }
    })
    return list.join(',');
}

const replaceNote = async (lmtData) => {
    lmtData.forEach(record => {
        let res = '';
        if (record["c_lmt_p_dim"]) {
            switch (record["c_lmt_p_dim"]) {
                case '0':
                    res += '所有客户累计'
                    break;
                case '1':
                    res += '每个客户'
                    break;
            }

        }
        if (record["c_lmt_s_dim"]) {
            switch (record["c_lmt_s_dim"]) {
                case '0':
                    res += '在当前活动的机构和渠道范围下'
                    break;
                case '1':
                    res += '每个机构'
                    break;
                case '2':
                    res += '每个渠道'
                    break;
                case '3':
                    res += '每个机构和渠道范围下'
                    break;
            }
        }
        if (record["c_lmt_d_dim"]) {
            switch (record["c_lmt_d_dim"]) {
                case 'P':
                    res += '活动期间内'
                    break;
                case 'D':
                    res += '每天'
                    break;
                case 'W':
                    res += '每周'
                    break;
                case 'M':
                    res += '每月'
                    break;
                case 'Q':
                    res += '每个季度'
                    break;
                case 'Y':
                    res += '每年'
                    break;
                case 'E':
                    res += '每次'
                    break;
            }
        }
        if (record["c_n_lmt"]) {
            res += `限量${record["c_n_lmt"]}件`;
        } else {
            res += `不限量`;
        }
        record["c_note"] = res;
    });

}
const clickLevel = async () => {
    lvPopup.value.open();
}
const clickIsDt = async () => {
    dtPopup.value.open();
};
const clickIsPay = async () => {
    payPopup.value.open();
}
const clickIsLmt = async () => {
    lmtPopup.value.open();
}
const confirm = async (e) => {
    lvPopup.value.close();
    dtPopup.value.close();
    payPopup.value.close();
    lmtPopup.value.close();
}
const getClassName = (classCode) => {
    const item = payClassItems.value.find(g => g.value === classCode);
    return item?.title || '';
}
const getCodeName = (code) => {
    const item = payCodeItems.value.find(g => g.value === code);
    return item?.title || '';
}
</script>

<style lang="scss" scoped>
@import '@/static/font/enjoyicon/iconfont.css';
@import '@/main.scss';


.footer-view {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.paging-view {
    display: flex;
    flex: 1;
    flex-direction: column;
    background: $uni-bg-color-inverse;
    border-radius: 20rpx;
    margin: 10rpx 20rpx;
    padding: 20rpx;
}


.m-main-top {
    display: grid;
    grid-template-columns: 51% 49%;
}

.m-list-top {
    display: grid;
    grid-template-columns: 51% 49%;
    border-bottom: 1px solid $uni-border-color;
}

.popup-content {
    align-items: center;
    justify-content: left;
    flex-direction: column;
    padding: 10rpx;
    width: 100%;
    background-color: #f8f8f8;
}

.popup-height {
    width: 200px;
}

.popup-title {
    width: 100%;
    flex: 1;
    color: #666666;
    font-size: 0.8em;
    line-height: 2em;
    text-align: center;
    margin: 5px 0px 0px;
    border-bottom: 1px solid #cccccc;
}
</style>
